<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表格</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="/assets/javascript/popup/popup.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/assets/styles/search.css">
    <style>
        .table-box {
            border-bottom: 1px solid #ddd;
        }
        .table tbody tr td{
            height: 30px;
        }
        .table thead tr th {
            border-bottom: 1px;
            text-align: center;
        }
        .table input[type=checkbox] {
            margin: 0;
        }
        .btn-div {
            padding: 10px;
        }
        .table tbody td {
            text-align: center;
        }
        .table tbody tr:hover {
            background-color: #e6f7ff;
        }
        /* 自定义checkbox样式 */
        #checkOne + label::before {
            content: "\a0";  /*不换行空格*/
            display: inline-block;
            vertical-align: .2em;
            width: 1em;
            height: 1em;
            border-radius: .2em;
            background-color: silver;
            text-indent: .15em;
            line-height: .65;
        }
        #checkOne:checked + label::before {
            content: "\2713";
            background-color: #528dff;
            color: #fff;
        }
        #checkOne {
            position: absolute;
            clip: rect(0, 0, 0, 0);
        }
        /* end-- */
    </style>
</head>

<body style="overflow-x:hidden;background:#f3f3f3;">
<div id="abnormal">
    <div class="btn-div">
        <button type="button" class="btn btn-primary" @click="abnormalHandle">处理异常</button>
        <button type="button" class="btn btn-primary" @click="refresh">刷新</button>
        <button type="button" class="btn btn-primary" id="MyAbnormalModel" @click="checkOrder">查看订单</button>
            <div class="search-box">
            <form action="">
                <select v-model="selected">
                    <option v-for="option in options" :value="option.value">
                        {{ option.text }}
                    </option>
                </select>
                <input v-model.trim="searchInput" placeholder="编辑我……">
                <button type="button" class="btn btn-success" @click="searchBtn">搜索</button>
            </form>
        </div>
    </div>
    <div>
        <table class="table table-condensed">
            <thead>
            <tr>
                <th>选择</th>
                <th>异常单号</th>
                <th>订单号</th>
                <th>异常类型</th>
                <th>异常原因</th>
                <th>异常状态</th>
                <th>创建时间</th>
                <th>修改人</th>
            </tr>
            </thead>
            <tbody>
            <template v-for="list in abnormalDate.list" v-cloak>
                <tr>
                    <td>
                        <input type="radio" :value="list.abnormalId" v-model="checkedDate" >

                    </td>
                    <td>{{list.abnormalId}}</td>
                    <td>{{list.orderId}}</td>
                    <td>{{list.abnormalType}}</td>
                    <td>{{list.abnormalReason}}</td>
                    <td>{{list.abnormalState}}</td>
                    <td>{{list.createtime}}</td>
                    <td>{{list.modifiedUser}}</td>
                </tr>
            </template>
            </tbody>
        </table>
    </div>
    <div class="footer-pager">
    <!--解析显示分页信息-->
    <!--分页文字信息-->
    <span>共{{abnormalDate.pages}}页，当前第{{abnormalDate.pageNum}}页，总{{abnormalDate.total}}条数据页</span>
    <!--分页条信息-->
    <ul class="pagination">
        <!--如果无上一页，不可点-->
        <template v-if="abnormalDate.hasPreviousPage==false">
            <li><a href="#">&laquo;</a></li>
        </template>
        <!--如果有上一页，可点-->
        <template v-if="abnormalDate.hasPreviousPage==true">
            <!--点前一页，跳到当前页码前一页-->
            <li @click="to_page(abnormalDate.pageNum-1)"><a href="#">&laquo;</a></li>
        </template>

        <!--遍历连续显示的页码-->
        <template v-for="pagenum in abnormalDate.navigatepageNums">
            <!--如果是当前页码，高亮显示-->
            <template v-if="pagenum==abnormalDate.pageNum">
                <li class="active"><a href="#">{{pagenum}}</a></li>
            </template>
            <!--如果不是当前页码，正常显示-->
            <template v-if="pagenum!=abnormalDate.pageNum">
                <!--点击后把当前页码传送给axios-->
                <li class @click="to_page(pagenum)"><a href="#">{{pagenum}}</a></li>
            </template>
        </template>

        <!--如果无下一页，不可点-->
        <template v-if="abnormalDate.hasNextPage==false">
            <li><a href="#">&raquo;</a></li>
        </template>
        <!--如果有下一页，可点-->
        <template v-if="abnormalDate.hasNextPage==true">
            <!--把当前页码的下一页传送给axios-->
            <li @click="to_page(abnormalDate.pageNum+1)"><a href="#">&raquo;</a></li>
        </template>
    </ul>
</div>
    <!-- 弹出框 -->
    <div class="modal fade" id="demoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">title</h4>
                </div>
                <div class="modal-body">提示内容</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary">提交更改</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

</div>
</body>
<script>
    $('.table tbody tr td input').click(function () {
        $(this).addClass('checkbox-style');
    })
</script>
<div id="popup" class="popup">
    <div class="title">
        <p>异常订单详情</p>
        <span></span>
        <span>x</span>
    </div>
    <div class="cont">
        <iframe src="" scrolling="auto" id="iframeId" style="width:100%;height:100%;border:0px;"></iframe></div>
</div>
<script>
    $('.table tbody tr td input').click(function () {

        $(this).addClass('checkbox-style');
    });
    /*  $('.MyAbnormalModel').on('click', function () {
          self.popbox();

          self.b_stop = false;

          return false;
      });*/
    $(function () {
        $('#popup').popup();
        $("body").css("overflow-y", "hidden");
    });
    // $(function () {
    //     $('#orderpopup').orderpopup();
    //     $("body").css("overflow-y", "hidden");
    // });
</script>

<script src="/commons/plugins/iview/js/vue.min.js"></script>
<script src="/commons/plugins/iview/js/vue-router.js"></script>
<script type="text/javascript" src="/commons/plugins/iview/js/axios.min.js"></script>
<script type="text/javascript" src="/commons/js/axiosUtils.js"></script>
<script type="text/javascript" src="/page/js/abnormal.js"></script>


</html>